<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>
    创建对象.
    属性的分类.
  </title>
</head>
<body>

1. 创建自定义对象的四种方法
var obj = new Object();
var obj = {};
function Fun(){} var obj = new Fun();
var obj = Object.create(proto);

2. 基于原型的对象创建和继承
任何一个js对象都有一个原型对象，及它的父对象；所有js对象的最终父对象都是 Object.prototype;

<!-- ============================================ -->

ECMAScript5 中属性的分类

1. 数据属性 (Data Property)
2. 访问器属性 (Accessor Property)

对象使用getter setter 定义属性：
var circle = {
  __width:0,  当所有都是访问器属性总得定义一个私有属性
  r:10,
  get size(){ // 访问器属性
    return Math.PI*this.r*this.r;
  },
  set size(value){
    this.r = Math.sqrt(value/Math.PI);
  }
}
console.log(circle.size); 调用getter访问器
circle.size = 31400; 调用属性的setter访问器
console.log(circle.r);

(1) 访问器属性的本质是两个函数，若想读取访问器属性的值，会自动调用get访问器；{}
(2) 访问器属性自己是不能存储数据的，所以访问器属性的值往往依赖于另一个数据属性
(3) 访问器属性一般用于两个场合：用于冗余属性和有 控制属性的只读或只写...

<!-- ============================================ -->

ECMScript5 中 属性(property)的特性(attribute)
属性：对象中可以保存数据的变量， 如stu.math
属性的特性：
    (1) 数据属性的特点：value(值), writable(可写),enumerable(可枚举),configurable(可重新配置)
    (2) 访问器属性的特性：set, get , enumerable, configuerable

@example 为obg对象添加一个新的数据属性- ECMAScript5
Object.defineProperty{
  obj,
  'english',
  { // 属性描述对象
    value:10,
    // 不写默认都是false
    writable: true,
    enumerabble: ture,
    configurable: true
  }
}
@example 为obg对象添加一个新的访问器属性- ECMAScript5
Object.defineProperty{
  obj,
  'english',
  { // 属性描述对象
    get:function(){ // 访问器属性
      return this.r*this.l
    },
    set:function(value){
      this.r = Math.sqrt(value/Math.PI);
    }
    configurable: true,
    enumerabble: ture
  }
}

<!-- ============================================ -->
JavaScript 中的数据类型：
1.值类型
2.特殊类型
3.引用类型（原生，宿主，自定义）
<!-- ============================================ -->

DHTML
Dynamic HTML, 动态HTML 指的是页面表现 DHTML = HTML+CSS+JavaScript，
即通过JavaScript来实现增删该查。使得页面呈现更好的交互效果。
DHTML 对象：
  1.BOM： window,history,location,doucment,screen,event,navigator
  2.DOM: HTML页面中的每一个元素都被JavaScript理解为DOM对象

DOM树
  1. 元素树：以document 对象为根，每个HTML 标签都是元素树的一个节点。
  2. 节点树：以document 对象为根，每个标签，文本，属性，注释都是节点树上的一个节点。
  Node 对象属性：
    1. parentNode: Node类型 当前节点的那个唯一的直接父节点对象
    2. childNodes：NodeList类型 当前节点的所有子节点，组成一个类数组对象
    3. firstChild: Node类型 当前节点的第一个子节点
    4. lastChild: Node类型 当前节点的最后一个子节点
    5. nextSibling: Node类型 当前节点的下一个兄弟节点
    6. previousSibiling: Node类型 当前节点的上一个兄弟节点
    ----------
    7. nodeName: string
    8. nodeType: Number
    9. nodeValue: string


与元素节点的属性相关的DOM属性 ElementNode
文本内容：
  1. document.getElementById('');
  2. document.getElementsByTagName(''); namedNodelist
  // 这两个查找元素方法普通元素节点对象，文档节点对象可以调用
  2. Element.innerHTML
  3. Element.textContent (Element.innerText ? fireFox) --> 剔除html标签

读取属性：
  1. Element.attributes // 获取元素上的所有属性 -- 类数组对象
  1. Element.attributes[下标].value
  2. Element.attributes[‘属性名’]; //
  3. Element.getAttribute('属性名');
修改属性：
  1. Element.setAttribute(name,value); (? IE8)
  2. Element.setAttributeNode(attrNode);
移除属性
  1.Element.removeAttribute('属性名');
  2.
判断属性
  1.Element.hasAttribute('属性名') // Boolean
  2.


<script>
  //@example 定义一个正方形 访问器属性
  var square = {
    width:10,
    get perimeter(){
      return this.width*4;
    },
    get size(){
      return this.width*this.width;
    },
    set size(value){
      this.width = Math.sqrt(value);
    }
  };
  var arr = Object.keys(square);


  // @example 输出节点
  console.log('nodeName | nodeType | nodeValue');
  console.log(document.nodeName+'\t'+document.nodeType+'\t'+document.nodeValue);
  console.log(document.firstChild.nodeName+'\t'+document.firstChild.nodeType+'\t'+document.firstChild.nodeValue);
  var node2 = document.firstChild.nextSibling;
  console.log(node2.nodeName+'\t'+node2.nodeType+'\t'+node2.nodeValue);
  var node3 = node2.firstChild;
  console.log(node3.nodeName+'\t'+node3.nodeType+'\t'+node3.nodeValue);
  var node4 = node3.nextSibling;
  console.log(node4.nodeName+'\t'+node4.nodeType+'\t'+node4.nodeValue);
  var node5 = node4.nextSibling;
  console.log(node5.nodeName+'\t'+node5.nodeType+'\t'+node5.nodeValue);
  console.log(node4.nodeName+'\t'+node4.nodeType+'\t'+node4.nodeValue);
  console.log(node5.childNodes.length);
  console.log(node5.childNodes[2].nodeType);

  // @example 理论上最快的
 var body = document.lastChild.lastChild;
</script>
</body>
</html>
